<template>
	<view class="um-select">
		<um-bottom-popup :show="show" z-index="1100" @close="close" :is-safe-area="false">
			<view class="content">
				<view class="list">
					<um-list-item :key="key" v-for="(item, key) in options" @tap="()=>select(key)">
						<um-container gap="12rpx" valign="center">
							<view :class="{icon:true, checked: checked[key]}">
								<um-icon name="check" color="#fff" size="14" v-if="checked[key]"></um-icon>
							</view>
							<um-text size="24rpx">{{item.label}}</um-text>
						</um-container>
					</um-list-item>
				</view>
				<view style="padding: 32rpx;">
					<um-button shape="circle" height="60rpx" size="28" @tap="confirm">确认</um-button>
				</view>
			</view>
		</um-bottom-popup>
	</view>
</template>

<script lang="ts" setup>
	import { onMounted, reactive } from 'vue';

	const props = withDefaults(defineProps<{
		show ?: boolean
		multiple ?: boolean
		options ?: any[]
	}>(), {
		show: false,
		multiple: false,
		options: [] as any
	})

	const emit = defineEmits(['confirm', 'update:show', 'close'])

	const checked = reactive<boolean[]>([])

	const close = () => {
		emit('close')
		emit('update:show', false)
	}

	const select = (key : number) => {
		if (props.multiple) {
			checked[key] = !checked[key]
		} else {
			for (var i = 0; i < checked.length; i++) {
				checked[i] = false
			}
			checked[key] = true
		}
	}

	const confirm = () => {
		if (props.multiple) {
			const selectOptions = []
			for (var i = 0; i < checked.length; i++) {
				if (checked[i]) {
					selectOptions.push(JSON.parse(JSON.stringify(props.options[i])))
				}
			}
			emit('confirm', selectOptions)
		} else {
			for (var i = 0; i < checked.length; i++) {
				if (checked[i]) {
					emit('confirm', JSON.parse(JSON.stringify(props.options[i])))
				}
			}
		}
	}

	onMounted(() => {
		if (props.options.length > 0) {
			for (var i = 0; i < props.options.length; i++) {
				checked[i] = false
			}
		}
	})
</script>

<style lang="scss" scoped>
	.um-select {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		color: #999999;

		.content {
			padding-top: 24rpx;
		}

		.list {
			max-height: 700rpx;
			overflow-y: scroll;
		}

		.icon {
			width: 28rpx;
			height: 28rpx;
			border: 2rpx solid #999999;
			border-radius: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.checked {
			border: 2rpx solid rgb(86, 119, 252);
			background-color: rgb(86, 119, 252);
		}
	}
</style>